.rank {
    .w100 {
        width: 100vw;
    }
    .mask {
        width: 100%;
        height: 100%;
        z-index: 1;
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .paddingtop-title {
        position: relative;
        z-index: 3;
    }
    .menupop {
        width: 100%;
        top: 50px;
        flex-wrap: wrap;
        justify-content: normal;
        left: 0;
        font-size: 4vw;
        z-index: 2;
        position: fixed;
        background-color: #fff;
        box-shadow: 0 0.05333rem 0.05333rem 0 rgba(252, 105, 118, .2);
        animation-duration: .5s;
    }
    .menu-item {
        margin: 5px 2.5%;
        width: 20%;
        text-align: center;
        color: #999;
        background-color: #f5f5f5;
        border-radius: 5px;
        &.active {
            color: #fff;
            background-color: #ffb48e;
        }
    }
    .mu-appbar {
        justify-content: space-between;
    }
    .icon {
        color: #ffb48e;
    }
    .mu-appbar {
        padding: 0 12px;
    }
    .rank_menu {
        width: 100%;
        position: fixed;
        z-index: 100;
        left: 0;
        background: #f6f6f6;
        top: 45px;
        height: 35px;
        align-items: center;
        padding: 0 18px;
        justify-content: space-between;
        animation-duration: .3s;
        small {
            font-weight: normal;
            font-size: x-small;
            color: #999;
        }
    }
    /*rank部分*/
    .rank-content {
        // padding-top: 45px;
        width: 100vw;
        height: 100vh;
        overflow-y: scroll;
        overflow-x: hidden;
        header {
            height: 35px;
            align-items: center;
            .type-item {
                color: #999;
                font-size: 3.5vw;
                &.active {
                    color: #ffb48e;
                    font-weight: 800;
                }
            }
        }
        .type-content {
            transition-timing-function: cubic-bezier(.165, .84, .44, 1);
            transition-duration: .3s;
            transform: translate(0) scale(1) translateZ(0);
            transition-property: all;
            align-items: baseline;
            .rankBox {
                height: calc(~'100vh - 35px');
                overflow-y: scroll;
            }
            .flex {
                align-content: baseline;
            }
            .rankTop {
                align-items: baseline;
            }
            .topItem {
                width: 29%;
                flex: 1;
                margin: 5px;
                font-size: 3.5vw;
                .pic {
                    position: relative;
                    background: radial-gradient( transparent 1px, transparent 1px, white 1px, white);
                    background-size: 10px 10px;
                    background-position: -10px -10px;
                    display: flex;
                    width: 100%;
                    flex-direction: column;
                    img {
                        padding: 3px;
                        width: 100%;
                    }
                }
                &:nth-child(1) {
                    order: 2;
                    flex: 1.15;
                    width: 30%;
                }
                &:nth-child(2) {
                    order: 1;
                }
                &:nth-child(3) {
                    order: 3;
                }
                .topDesc {
                    span {
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        max-width: 100%;
                    }
                    align-items: center;
                }
                .grey {
                    color: #999;
                }
            }
        }
        .rank-type {
            .rank_title {
                padding: 0 18px;
                justify-content: space-between;
                small {
                    font-size: x-small;
                    color: #999;
                    font-weight: normal;
                }
            }
            width: 100vw;
            .mh_des {
                font-size: 11px;
                align-items: flex-end;
                color: #4caf50;
                .author {
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    max-width: 100px;
                }
            }
            .mu-item.has-avatar {
                height: 40px;
            }
            .mu-item-action {
                min-width: 40px;
            }
            .mu-item-title {
                width: min-content;
                display: flex;
                flex-direction: column;
                font-size: 13px;
                height: initial;
                line-height: initial;
                span {
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                .author {
                    font-size: 12px;
                    color: #999;
                }
            }
        }
    }
}